| MFPanels / 1.8 / demo / 2 panel.html file last updated : 2023-06-06 |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Methodfish Resizable Panels demo</title>
<link rel="icon" type="image/png" href="http://localhost/methodfish/public_html/images/methodfish_dev.ico">
<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Courier+Prime|Roboto|Material+Icons|Material+Icons+Outlined&display=block">
<script src="../js/mfpanel.js"></script>
<link href="../css/mfpanel.css" rel="stylesheet preload prefetch" as="style">
<style>
body {
margin:0;
padding-top:10px;
xpadding:10px;
padding-left:10px;
padding-right:10px;
box-sizing: border-box;
}
.container {
width: calc(100% - 0px);
height: calc(100vh - 16px);
padding:0px;
box-sizing: border-box;
}
#left {
width:50%;
background-color: lightgray;
}
#right {
width:50%;
background-color: lightblue;
}
#left, #right {
float:left;
height:100%;
margin:0;
overflow:auto;
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<div id="left" class="left resizable-e">
left: Documentation and download files can be found on <a href="http://localhost/methodfish/public_html/Projects/MFPanels">methodfish.com</a> <BR><BR>
<br>
The layout used here is :
<pre style="border:solid 1px grey; overflow-x:scroll; padding:10px">
<div class="container">
<div class="left resizable-e">...</div>
<div class="right1">...</div>
</div>
</pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.
<br><button type="button" onClick="MFPanels().reset(); window.location.href=window.location.href">Reset Panels</button>
</div>
<div id="right">
right: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.</div>
</div>
</body>
</html>Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment